

<div ng-controller="DemoFloatLabelCtrl as ctrl" layout="column" ng-cloak>
    <md-content class="md-padding">
        <form ng-submit="$event.preventDefault()" name="searchForm">
            <p>The following example demonstrates floating labels being used as a normal form element.</p>
            <div layout-gt-sm="row">
                <md-input-container flex>
                    <label>Name</label>
                    <input type="text"/>
                </md-input-container>
                <md-autocomplete flex required
                                 md-input-name="autocompleteField"
                                 md-input-minlength="2"
                                 md-input-maxlength="18"
                                 md-no-cache="ctrl.noCache"
                                 md-selected-item="ctrl.selectedItem"
                                 md-search-text="ctrl.searchText"
                                 md-items="item in ctrl.querySearch(ctrl.searchText)"
                                 md-item-text="item.display"
                                 md-floating-label="Favorite state">
                    <md-item-template>
                        <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
                    </md-item-template>
                    <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
                        <div ng-message="required">You <b>must</b> have a favorite state.</div>
                        <div ng-message="minlength">Your entry is not long enough.</div>
                        <div ng-message="maxlength">Your entry is too long.</div>
                    </div>
                </md-autocomplete>
            </div>
        </form>
    </md-content>
</div>

